<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<link rel="stylesheet" href="static/css/sign.css"/>
<link rel="stylesheet" href="static/layui/css/layui.css"/>
<body>
<div class="default-sign">
	<div id="Craft" class="layui-row ">
		<form id="form" class="layui-form" action="" >
			<div class="layui-form-item layui-row">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-inline">
					<input id="name" type="text" name="name" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item layui-row">
				<label class="layui-form-label">电话号码</label>
				<div class="layui-input-inline">
					<input id="phone" type="text" name="phone" required  lay-verify="required|confirmPhone" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-inline">
					<input id="password" type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">确认密码</label>
				<div class="layui-input-inline">
					<input type="password" class="layui-input" placeholder="请确认密码" lay-verify="required|confirmPass">
				</div>
			</div>


			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">出生日期</label>
					<div class="layui-input-inline">
						<input id="birthday" type="text" name="birthday" class="layui-input" placeholder="请选择出生日期">
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">请选择地区</label>
				<div class="layui-inline">
					<select name="province" id="province" lay-verify="required" lay-search lay-filter="province">
						<option value="">省份</option>
					</select>
				</div>
				<div class="layui-inline">
					<select name="city" id="city" lay-verify="required" lay-search lay-filter="city">
						<option value="">地级市</option>
					</select>
				</div>
				<div class="layui-inline">
					<select name="district" id="district" lay-verify="required" lay-search>
						<option value="">县/区</option>
					</select>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" id="street" name="street" placeholder="街道" class="layui-input" placeholder="请确认密码" lay-verify="required">
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男">
					<input type="radio" name="sex" value="女" title="女" checked>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="btn-div layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即注册</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>

		</form>
	</div>
</div>

</body>
<script src="static/js/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="static/layui/layui.js" charset="utf-8"></script>
<script src="static/js/area.js" type="text/javascript"></script>
<script src="static/js/select.js" type="text/javascript"></script>
<script>
	layui.use(['form','laydate'],function(){
		var form = layui.form
			,laydate = layui.laydate
			,reg=/^1\d{10}$/;

		form.verify({
			// 校验电话号码是否一致
			confirmPhone:function(value){
				if(!reg.test($("#phone").val())){
					return '提示：电话号码有误！';
				}
			},
			// 校验两次密码是否一致
			confirmPass:function(value){
				if($("#password").val() !== value)
					return '提示：两次输入密码不一致！';
			}
		});

		//监听提交
		form.on('submit(formDemo)', function(data){
			data = data.field;
			$.ajax({
				url:"/user/register",
				type:"post",
				data:{
					"name" : data.name,
					"password" : data.password,
					"phone" : data.phone,
					"sex" : data.sex,
					"birthday" : data.birthday,
					"address" : data.province+data.city+data.district+data.street
				},
				success:function(result){
					if(result.code==200){
						layer.msg("注册成功！",{icon: 1,time:2000},function(){window.location.replace("index.html")});
					}else{
						layer.msg(result.msg,{icon: 2,time:2000});
					}
				}
			});
			return false;
		});

		laydate.render({
			elem: '#birthday',
			max:0
		});
	});

</script>
</html>
